class Listeners {

  constructor() {
    console.log('插件js导入成功')
    this.listenStatus = 0
    this.load()
  }

  // 页面加载完成后执行
  load() {
    window.onload = () => {
      this.createCtrlArea()
      // this.ajaxLoad()
      this.ajaxRewrite()
      this.$('#Listeners_btn_start').onclick = () => {
        this.start()
        console.log('Listeners_btn_start')
      }
      this.$('#Listeners_btn_stop').onclick = () => {
        this.stop();
        console.log('Listeners_btn_stop')
      }
    }
  }

  start() {
    this.listenStatus = 1
    this.taskTips('开始监听')
  }

  stop() {
    this.listenStatus = 0
    this.taskTips('停止监听')
  }

  // XMLHttpRequest 重写
  ajaxRewrite() {
    var open = XMLHttpRequest.prototype.open, _this = this;
    XMLHttpRequest.prototype.open = function () {
      this.addEventListener('load', function () {
        // 如果 监听状态 等于 1 发送数据
        if (_this.listenStatus == 1) {
          _this.ajaxLoad(this)
        }
        // console.log(this)
      });
      open.apply(this, arguments);
    };
  }

  // 发送数据
  ajaxLoad(xhr) {
    if (/https?:\/\/[\w\.-]+\/live\/\d{4}\/\d{2}\/\d{2}\/\d+\.htm/img.test(xhr.responseURL)) {
      // console.log(xhr.orignUrl)
      // console.log(xhr.response)
      console.log(xhr)
      this.taskTips('发送中...')
      let dataSend = new XMLHttpRequest()
      dataSend.open('POST', '/url') // 数据接收地址
      dataSend.onload = () => {
        // console.log(this.response)
        this.taskTips('发送成功')
      }
      dataSend.onerror = () => {
        // console.log(this.response)
        this.taskTips('发送失败')
      }
      dataSend.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
      dataSend.send('data=' + encodeURIComponent(xhr.response));
    }
  }

  createCtrlArea() {
    let cDiv = document.createElement('div');
    cDiv.id = 'Listeners_ctrl_area'
    cDiv.style.cssText = `
    position: fixed;
    bottom: 30px;
    right: 50px;
    background: transparent;
    z-index: 999999;
    `
    this.$('body').appendChild(cDiv)
    // this.createTaskTips()
    this.createButton()
  }

  createButton() {
    let cDiv = document.createElement('div');
    cDiv.id = 'Listeners_btn'
    cDiv.style.cssText = `
      width: 240px;
      height: 40px;
      display: inline-block;
      background: rgba(54, 55, 65, 0.8);
      color: white;
      border-radius: 10px;
      display: flex;
      align-item: center;
      justify-content: center;
      overflow: hidden;
      box-shadow: 0 0 10px 10px rgba(0,0,0,.1);
      margin: 5px 0;
      `
    cDiv.innerHTML = `
      <style>
        #Listeners_btn button {
          flex: 1;
          color: #FFF;
          background: #000;
          cursor: pointer;
          border: none;
          outline: none;
        }
      </style>
      <button id="Listeners_btn_start" style="background: #2e9fff">开始监听</button>
      <button id="Listeners_btn_stop" style="background: rgb(251, 122, 107)">停止监听</button>
      `
    this.$('#Listeners_ctrl_area').appendChild(cDiv)
  }

  createTaskTips() {
    let cDiv = document.createElement('div');
    cDiv.style.cssText = `
      width: 240px;
      height: 120px;
      display: inline-block;
      background: rgba(54, 55, 65, 0.8);
      color: white;
      border-radius: 10px;
      margin-bottom: 5px;
      `
    cDiv.innerHTML = `
      <div style="display: flex;
      width: 100%;
      line-height: 20px;
      font-size: 12px;
      padding: 10px;
      justify-content: flex-start;
      align-items: flex-start;
      flex-wrap: wrap;
      flex-direction: row;" 
      id="douyinAutoTaskTips"></div>
    `
    this.$('#Listeners_ctrl_area').insertBefore(cDiv, this.$('#Listeners_ctrl_area').firstChild)
  }

  taskTips() {
    let text = arguments.length > 0 ? [].join.call(arguments) : ''
    let taskTips = document.querySelector('#douyinAutoTaskTips')
    if (!Boolean(taskTips)) {
      this.createTaskTips()
      taskTips = document.querySelector('#douyinAutoTaskTips')
    }
    if (taskTips.children.length >= 5) {
      taskTips.children[0].remove()
    }
    let cSpan = document.createElement('span')
    cSpan.style.cssText = `
    display: inline-block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    `
    cSpan.innerText = this.formatTime() + ' --- ' + text
    console.log(cSpan.innerText)
    taskTips.appendChild(cSpan)
  }

  formatTime() {
    let gt = new Date();
    return gt.getHours() + ':' + gt.getMinutes() + ':' + gt.getSeconds()
  }

  $ = (selector) => {
    return document.querySelector(selector)
  }

}

const listenIn = new Listeners()